<template>
  <div>
    <Tree :data="treeData" v-if="treeData.length > 0 && !loading"></Tree>
    <NoData v-else :loading="loading"></NoData>
  </div>
</template>
<script>
import { getReportsTree } from '@/api/drill_compete.js'
import LevelMixin from '@/mixin/levelMixin';
export default {
  name: 'ReportTree',
  props: {
    testId: {
      type: String,
      default: ''
    },
    taskId: {
      type: String,
      default: ''
    },
    company: {
      type: String,
      default: ''
    }
  },
  mixins:[LevelMixin],
  data() {
    return {
      treeData: [],
      loading: false
    }
  },
  watch: {
    taskId(val) {
      val && this.getReportsTree()
    }
  },
  mounted() {
    this.getReportsTree()
  },
  methods: {
    getReportsTree() {
      this.loading = true
      let params = {
        testId: this.testId,
        page:1,
        pageSize:9999
      }
      if(this.taskId){
        params.taskId = this.taskId
      }
      if(this.company){
        params.company = this.company
      }
      getReportsTree(params)
        .then(({ code, data, message }) => {
          if (code === 1) {
            this.treeData = data.pageData
            this.dealData(this.treeData)
          } else {
            this.$Message.error(message)
          }
        })
        .catch(() => {
          this.$Message.error('请求报告数据失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    dealData(data) {
      try {
        data.forEach((item) => {
          let statusObj = this.mixinPaserStatus(item.status);
          item.title = item.reportName
          item.render = (h, { root, node, data }) => {
            return h('div', {
              class:'flex'
            }, [
              h('span', {
                class:'mr10 text-ellipsis',
                style:{
                  flex:'auto',
                  width:'300px'
                },
                attrs:{
                  title:data.reportName
                }
              }, data.reportName),
              h('span', {
                class:'mr10',
                style:{
                  color:statusObj.color,
                  width:'8em',
                  flex:'none'
                }
              }, statusObj.text),
              h('span', {
                class:'mr10',
              }, data.score)
            ])
          }
          if (item.children) {
            this.dealData(item.children)
          }
        })
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style scoped>
  /deep/.ivu-tree ul {
    font-size: 14px;
  }
</style>
